import React from 'react'
import TweenOne from 'rc-tween-one'
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin'
TweenOne.plugins.push(Children)

export default class Index extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      value: this.props.value,
      animation: null,
    }
  }

  componentDidMount () {
    this.init()
  }

  init = () => {
    const { value } = this.state
    this.setState({
      animation: {
        Children: {
          value: typeof value === 'number' ? value : 10000, floatLength: 0,
        },
        duration: 1000,
      }
    })
  }

  render () {
    return (
      <div
        style={{
          display: 'flex',
          height: '100%',
          minHeight: '220px',
          alignItems: 'center',
          textAlign: 'center',
        }}
      >
        <div style={{ width: '100%' }}>
          <TweenOne
            animation={this.state.animation}
            style={{ fontSize: 56, marginBottom: 12 }}
          >
            0
          </TweenOne>
        </div>
      </div>
    )
  }
}
